<template>
  <div class="box">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="推送任务" name="1">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            prop="date">
          </el-table-column>
          <el-table-column
            label="报表类型"
            prop="name">
          </el-table-column>
          <el-table-column
            label="接收人Email"
            prop="name">
          </el-table-column>
          <el-table-column
            label="定时器"
            prop="name">
          </el-table-column>
          <el-table-column
            label="数据源"
            prop="name">
          </el-table-column>
          <el-table-column
            label="下一次推送时间"
            prop="name">
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="name">
          </el-table-column>
          <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
              <el-button type="primary" plain size="mini">新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="邮件服务器" name="2">
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">SMTP服务器地址: smtp.exmail.qq.com:587</div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light">发件人地址: TFL@tian-yuan.net</div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple">发件人帐号: TFL@tian-yuan.net </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light">发件人密码: ****** </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple">SSL加密: true</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">如果邮件正确, 但无法接收到推送邮件, 可尝试使用以下办法:</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <ol type="1">
                <li>查看[垃圾邮箱]中是否有需要的邮件.</li>
                <li>将[发件人地址]添加到[接收人]的[白名单]中.</li>
                <li>更换可用的发件人.</li>
              </ol>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
  </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'SystemSetting',
  data () {
    return {
      activeName: '1',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleDelete (index, row) {
      console.log(index, row)
    }
  }
}
</script>

<style lang="stylus" scoped>
.box
  background: #fff
  padding: 26px
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
  .grid-content
    text-align: left
</style>
